//广告效果
var poster=document.querySelector(".poster");
var qx=document.querySelector(".poster>img");
qx.onclick=function(){
    poster.style.display="none";   
}
//搜索栏
var inp=document.querySelector(".bigsearch .search .search_center .search_top .top_left input");
var search=document.querySelector(".bigsearch .search .search_center .search_top .top_left>button");

search.onmouseover=function(){
    this.style.backgroundColor="#c81623";
    inp.style.borderColor="#c81623";
}
search.onmouseout=function(){
    this.style.backgroundColor="#e1251b";
    inp.style.borderColor="#e1251b";
}
//橱窗效果 发现好货

var moves=document.querySelector(".smbottom");
var smShop=document.querySelector(".smright");
var xbtn=document.querySelector(".xmove");
var smtop=document.querySelector(".smtop");
smShop.onmouseover=function(){
    clearInterval(timer)
    moves.style.display="block";
}
smShop.onmouseout=function(){
    timer=timer=setInterval(time,30);
    moves.style.display="none";
}
xbtn.onmousedown=function(e){
    var e=e||window.event;
    var x=e.offsetX;
    var y=e.offsetY;
    var w=smShop.offsetLeft;
    document.body.onmousemove=function(e){
        var e=e||window.event;
        var l=e.clientX;
        var h=e.clientY;       
        var movex=l-x-w;
        xbtn.style.left=movex+"px";     
        if(movex<=0){
            movex=0;
        xbtn.style.left=0+"px";
        }else if(movex>=900){
            movex=900;

        xbtn.style.left=900+"px";
        }
        smtop.style.left=-(20/9)*movex+"px";
        e.preventDefault();        
    }
    e.preventDefault();		
    }
document.body.onmouseup=function(){
    document.body.onmousemove=null
}
//动画
var str=0;
var timer=setInterval(time,30)

function time(){
    str++;
    if(str>=2000){
        str=0;
    }
    smtop.style.left=-str+"px";
    xbtn.style.left=(9/20)*str+"px";     


}

//返回顶部
var totop=document.querySelector(".toTop");
var gotop=document.querySelector(".gotop");
var bigsearch=document.querySelector(".bigsearch");
var tosearch=document.querySelector(".search")
window.onscroll=function(){

    var top=document.documentElement.scrollTop;
    if(top>=600){
        gotop.style.display="block";
        var str=`<div class="continer search">
        <h1 title="京东"><img src="../images/re_03.jpg" alt="logo" /></h1>
        <div class="search_center">
          <div class="search_top">
            <div class="top_left">
              <input type="text" placeholder="天梭手表" /><button>
                <i class="iconfont icon-sousuo"></i></button
              ><i class="iconfont icon-xiangji"></i>
            </div>
            <a href="./shops.html" class="top_right">
              <i class="iconfont icon-gouwuche"></i>
              <span class="shops">0</span>
              我的购物车
            </a>         
        </div>     
      </div>`;
      totop.className="goTop";
      bigsearch.innerHTML=str
      bigsearch.className="smsearch"; 
          
    }else{
        gotop.style.display="none";
      bigsearch.className="bigsearch"; 
      var str=`      <div class="continer search">
      <h1 title="京东"><img src="../images/logo_14.jpg" alt="logo" /></h1>
      <div class="search_center">
        <div class="search_top">
          <div class="top_left">
            <input type="text" placeholder="天梭手表" /><button>
              <i class="iconfont icon-sousuo"></i></button
            ><i class="iconfont icon-xiangji"></i>
          </div>
          <a href="./shops.html" class="top_right">
            <i class="iconfont icon-gouwuche"></i>
            <span class="shops">0</span>
            我的购物车
          </a>
          <ul class="bottom">
            <li><a href="#" class="one">新芝士蛋糕</a></li>
            <li><a href="#">家装节</a></li>
            <li><a href="#">美妆新品</a></li>
            <li><a href="#">腕表直降</a></li>
            <li><a href="#">耕地机</a></li>
            <li><a href="#">好药到家</a></li>
            <li><a href="#">新潮鞋履</a></li>
            <li><a href="#">防疫物资</a></li>
            <li><a href="#">每天100-50</a></li>
          </ul>
        </div>
        <div class="search_bottom">
          <li><a href="#" class="one">秒杀</a></li>
          <li><a href="#" class="two">优惠卷</a></li>
          <li><a href="#">PLUSh会员</a></li>
          <li><a href="#">品牌闪购</a></li>
          <li><a href="#">拍卖</a></li>
          <li><a href="#">京东家电</a></li>
          <li><a href="#">京东超市</a></li>
          <li><a href="#">京东生鲜</a></li>
          <li><a href="#">京东国际</a></li>
          <li><a href="#">京东金融</a></li>
        </div>
      </div>
      <div class="search_right">
        <img src="../images/er_14.jpg" alt="" />
      </div>
    </div>`;
    totop.className="toTop"; 
    bigsearch.innerHTML=str;
    bigsearch.className="bigsearch";     
    }
    
}
gotop.onclick=function(){
    var top=document.documentElement.scrollTop||document.body.scrollTop;  
    var timer=setInterval(()=>{
        top-=20;
        if(top<=0){
            top=0;
            clearInterval(timer)
        }
        document.documentElement.scrollTop=document.body.scrollTop=top;
    },10)   
}